import React, { Component } from 'react';
import { SetOutline, LeftOutline, UserOutline, MoreOutline } from 'antd-mobile-icons'
import { Input, List, Toast } from 'antd-mobile'
import { Button, Dialog, Space, Divider } from 'antd-mobile'
import '../style/Index/mine/setup.css'
import services from '../api/interface'
// import '../style/Index/Setup/setup.css'
import '../style/Index/Setup/setup.css'
class Setup extends Component{
    state = {
        showElem: 'none',
        username: '',
        showpass: 'none',
        oldpassword: '',
        newpassword: '',
    }
    onClick() {
        this.props.history.go(-1)
    }
    //绑定用户名
    onbinduser() {
        this.setState({
            showElem: 'block'
        })
    }
    //修改密码
    onfixedpass() {
        this.setState({
            showpass: 'block'
        })
    }
    async onclearmask() {
        var res2 = await services.user.user_bindusername({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid'), username: this.state.username })
        if (res2.data.code == 200) {
            localStorage.setItem('username', this.state.username)
            Toast.show({
                icon: 'success',
                content: '修改成功！',
            })
            this.setState({
                showElem: 'none'
            })
        }

    }
    async onclearpass() {
        var res3 = await services.user.user_updatePassword({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid'), oldpassword:this.state.oldpassword,newpassword:this.state.newpassword })
        if (res3.data.code == 200) {
            Toast.show({
                icon: 'success',
                content: '修改成功！',
            })
            this.setState({
                showElem: 'none'
            })
        }else if(res3.data.code==10030){
            Toast.show({
                icon: 'fail',
                content: '原始密码错误！',
            })
            this.setState({
                showpass: 'none'
            })
        }
    }
    outlogin() {
        localStorage.clear()
        Toast.show({
            icon: 'success',
            content: '退出成功！',
        })
    }
    onChangeUser(e) {
        this.setState({
            username: e.target.value
        })
    }
    //旧密码
    onChangeOldpass(e) {
        this.setState({
            oldpassword: e.target.value
        })
    }
    //新密码
    onChangeNewpass(e) {
        this.setState({
            newpassword: e.target.value
        })
    }
    render() {
        return (
            <div className='setup'>
                <div className='dnavbar'>
                    <span onClick={() => { this.onClick() }}><LeftOutline /></span>
                    <div>设置</div>
                    <div className='dmicon'>

                    </div>
                </div>
                <div className="setup_shaxuan">
                    <List >
                        <List.Item prefix={<UserOutline />} onClick={() => { this.onbinduser() }}>
                            绑定用户名
                        </List.Item>

                        <List.Item prefix={<SetOutline />} onClick={() => { this.onfixedpass() }}>
                            修改密码
                        </List.Item>
                    </List>
                    <div className="blockmask" style={{ display: this.state.showElem }}>
                        <p>绑定用户名</p>
                        <div className="blockMask_input">
                            <input type="text" placeholder='请输入用户名' name='username' value={this.state.value} onChange={(e) => this.onChangeUser(e)} />
                        </div>
                        <button onClick={() => { this.onclearmask() }}>确定</button>
                    </div>
                    <div className="blockmask_t" style={{ display: this.state.showpass }}>
                        <p>修改密码</p>
                        <div className="blockMask_input_t">
                            <input type="password" placeholder='请输入原始密码' name='oldpassword' value={this.state.value} onChange={(e) => this.onChangeOldpass(e)} />
                            <input type="password" placeholder='请输入新密码' name='newpassword' value={this.state.value} onChange={(e) => this.onChangeNewpass(e)} />
                        </div>
                        <button onClick={() => { this.onclearpass() }}>确定</button>
                    </div>

                </div>
                <button className='etail_button' onClick={() => { this.outlogin() }}>退出登录</button>
            </div>
        );
    }
}

export default Setup;